<template>
    <canvas id="myCanvas" width="1700" height="820" ref="cvs"></canvas>
</template>

<script lang="ts" setup>
import Line from "@/features/basic-shape/Line";
import { message } from "ant-design-vue";
import { onMounted, ref } from "vue";
import { FontFamily } from "../Constants";
import GridSystem from "../GridSystem";

const cvs = ref(null);
let gls = ref<GridSystem | null>(null);

const callback = ref<((remove?: boolean) => void) | undefined>(undefined);

onMounted(() => {
    reset();
})

function reset(clear = false) {
    if (clear) localStorage.setItem("features", '');
    if (gls.value) {
        gls.value.destroy();
        gls.value = null;
    }
    let canvasDom = cvs.value as unknown as HTMLCanvasElement;
    const gridSys = new GridSystem(canvasDom);
    gridSys.initEventListener();
    gridSys.loadFont(FontFamily.SHISHANG);
    gridSys.draw(true)
    gls.value = gridSys;
    setSize(canvasDom);

    message.info("点击移动绘制吧!")
    function downMove2Line() {
        let pen = new Line();
        // pen.isPixelLen = true;
        callback.value = gls.value?.downMove2Line(pen, () => {
            pen.toStraightPoints();
        })
    }
    downMove2Line();

}

function setSize(canvasDom: HTMLCanvasElement) {
    canvasDom.width = document.documentElement.clientWidth - 4;
    canvasDom.height = document.documentElement.clientHeight - 4;

    window.onresize = () => {
        canvasDom.width = document.documentElement.clientWidth - 4;
        canvasDom.height = document.documentElement.clientHeight - 4;
    }
}

</script>